<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">门店租借电池价格模版详情</view>
		</view>
		<view class="cu-card no-card">
			<view class="cu-item padding">
				<view class="flex justify-between padding-bottom-sm solid-bottom margin-top">
					<view>模版名称</view>
					<view>{{templateTitle}}</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white">
			<view class="action"><text class="cuIcon-refresharrow text-orange"></text>电池类型价格项</view>
		</view>
		<view class="list-body">
			<view class="cu-card article" v-for="(item,index) in listData" :key="index">
				<view class="cu-item padding-sm">
				   <view class="content">
					   <image :src="item.batteryTypeImg?item.batteryTypeImg:'/static/jxw.png'" mode="aspectFill"></image>
					   <view class="text-cut">
						   <view class="text-cut text-orange">{{item.batteryTypeName}}</view>
						   <block v-for="(costItem,costIndex) in item.costItems" :key="costIndex">
							<view class="margin-top-sm">价格类型：{{costItem.typeName}}
								<text v-if="costItem.state == 1">（全局价格）</text>
								<text v-if="costItem.state == 2" class="text-orange">（自定义价格）</text>
							</view>
						   	<view>押金金额：{{costItem.depositPrice}}元</view>
						   	<view>租借价格：{{costItem.dayPrice}}元/天</view>
						   </block>
					   </view>
				   </view>
			    </view>
			</view>
			<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
			<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				templateId:null,
				templateTitle:null,
				listData:[],
				canRefresh:false
			};
		},
		onLoad(option) {
			this.templateId = option.id;
			this._loadListData();
		},
		onShow(){
			if(this.canRefresh){
				this._loadListData();
			}
		},
		methods: {
			_loadListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnShopFeeInfo,{
					templateId:this.templateId
				},(res)=>{
					if(res.code == 200){
						_self.templateTitle = res.body.title;
						_self.listData = res.body.items;
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false,
							complete:function(){
								uni.navigateBack();
							}
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="less">
.list-body scroll-view{height:90vh;}
.list-body .cu-card>.cu-item{position:relative;margin-bottom:0;}
.container .list-body .cu-card.article>.cu-item .content>image{width:160rpx;height:160rpx;}
.list-footer{position:fixed;bottom:0;width:100vw;}
</style>
